<template>
    <div>
        <gallery :images="images" :index="index" @close="index = null"></gallery>
        <div class="image-list">
            <template v-for="(item,imgIndex) in images">
                                 <img :height="height"  :key="item.src" @click="index=imgIndex" :src="item.src">
</template>
      </div>
    </div>
</template>

<script>
    　
    import VueGallery from 'vue-gallery';
    import util from '@/libs/util'
    export default {
        name: 'image-video-list',
        desc: '图片视频显示',
        components: {
            'gallery': VueGallery
        },
        props: {
            imageList: {
                type: Array,
                default: () => [],
                required: true
            },
            videoList: {
                type: Array,
                default: () => [],
                required: true
            },
            height: {
                type: String
            }
        },
        data() {
            return {
                index: null,
            }
        },
        computed: {
            images() {
                let images = [];
                this.imageList.forEach((img) => {
                    images.push({
                        title: '',
                        href: img,
                        src: img,
                        type: 'image/jpeg'
                    })
                })
    
                this.videoList.forEach((video) => {
                    images.push({
                        title: '',
                        type: 'video/*',
                        src: 'https://unpkg.com/blueimp-gallery@2.27.0/img/video-play.png',
                        poster: 'https://unpkg.com/blueimp-gallery@2.27.0/img/video-play.png',
                        sources: [{
                            href: video,
                            type: 'video/mp4'
                        }]
                    })
                })
                return images;
            }
        },
        mounted() {
    
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
    .image-list {
        display: flex;
        flex-wrap: wrap;
        img {
            width: 32.5%;
            // height: 30vw;
            padding-left: 2px;
        }
    }
</style>
